<template>
    <div>
        <div class="passBox">
            <el-form ref="passForm" :model="passForm" :rules="rules" label-width="100px">
                <el-form-item label="旧密码" prop="oldPass">
                    <el-input v-model="passForm.oldPass" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPass">
                    <el-input v-model="passForm.newPass" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="rNewPass">
                    <el-input v-model="passForm.rNewPass" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updatePass()">修改</el-button>
                    <el-button type="info" @click="resetForm('passForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            passForm: {
                oldPass: '',
                newPass: '',
                rNewPass: ''
            },
            rules: {
                oldPass: [
                    { required: true, message: '旧密码不能为空', trigger: 'blur' },
                    { min: 0, max: 6, message: '密码长度在 0 - 6 位', trigger: 'blur'}
                ],
                newPass: [
                    { required: true, message: '新密码不能为空', trigger: 'blur' },
                    { min: 0, max: 6, message: '密码长度在 0 - 6 位', trigger: 'blur'}
                ],
                rNewPass: [
                    { required: true, message: '确认新密码不能为空', trigger: 'blur' },
                    { min: 0, max: 6, message: '密码长度在 0 - 6 位', trigger: 'blur'}
                ]
            },
            userInfo: {
                userId: ''
            }
        }
    },
    created() {
        this.getUserId()
    },
    methods: {
        updatePass() {
            // this.$refs.loginForm.validate(valid => {
            this.$refs.passForm.validate(valid => {
                if (!valid) return
                this.$axios.post('personal/updatePass/' + this.userInfo.userId,{
                    "oldPass": this.passForm.oldPass,
                    "newPass": this.passForm.newPass,
                    "rNewPass": this.passForm.rNewPass
                }).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success(res.data.message)
                        let timer = setTimeout(() => {
                            //需要定时执行的代码
                            this.loginOut()
                            this.$message.warning('密码发生变化,请重新登录')
                        },2000)
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            })
        },
        getUserId() {
            if (this.$store.getters.getUserInfo.userName) {
                this.userInfo = this.$store.getters.getUserInfo
            }
        },      
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        loginOut() {
            this.$axios.get('logout').then(response => {
                if (response.data.code === 200) {
                    window.localStorage.removeItem('token')
                    window.sessionStorage.removeItem('userInfo')
                    this.$router.push('/login')
                }
            })
        }
    }
}
</script>

<style scoped>
.passBox {
    width: 450px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-30%, -65%);
}
</style>